<template>
  <!-- bind your configurations -->
  <vue-scroll ref="vs" :ops="ops" @handle-scroll="handleComplete">
    <slot></slot>
  </vue-scroll>
</template>

<!-- 组件的模型 -->
<script>
import vueScroll from "vuescroll";
import "vuescroll/dist/vuescroll.css";
export default {
  name: "car",
  props: {
    barBackground: {
      type: String,
      default: "#666"
    },
    barSize: {
      type: String,
      default: "2px"
    }
  },
  components: { vueScroll },
  computed: {
    ops() {
      return {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          background: "#01a99a",
          opacity: 0,
          size: this.barSize,
          specifyBorderRadius: false,
          gutterOfEnds: null, //轨道距 x 和 y 轴两端的距离
          gutterOfSide: "0", //距离容器的距离
          keepShow: false, //是否即使 bar 不存在的情况下也保持显示
          border: "none" //边框
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: this.barBackground
        }
      };
    }
  },
  mounted() {},
  methods: {
    scrollTo(obj, speed, easing) {
      this.$refs.vs.scrollTo(obj, speed, easing);
    },
    handleComplete(vertical, horizontal) {
      let { process } = vertical;
      if (process == 0) this.$emit("pullRefresh");
      if (process == 1) this.$emit("pushLoad");
    }
  }
};
</script>
